<template>
  <a-spin :spinning="confirmLoading">
    <div class="list-warp">
      <a-list item-layout="horizontal" :data-source="dataSource">
        <a-list-item slot="renderItem" slot-scope="item">
          <a slot="actions" v-if="item.hasForm" @click="handleDetail(item)">详情</a>
          <a-list-item-meta
            :description="'操作人：'+(item.textMap?item.textMap.assignee$DICT_TEXT_:item.assignee)+'，操作时间：'+ fomart(item.endTime)"
          >
            <h2 slot="title">节点:【{{item.name}}】,审批意见:【{{item.canceled?`${item.comment || '不通过'}`:'通过'}}】</h2>
            <a-avatar slot="avatar" style="backgroundColor:#87d068">{{getFirstName(item)}}</a-avatar>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
    <TaskHistoryFormModal :formData="formData" :currentTask="task" ref="TaskHistoryFormModal" />
  </a-spin>
</template>

<script>
import { List as AList, Avatar as AAvatar } from 'ant-design-vue'
import { getAction } from '@/services/manage'
import moment from 'moment'
import TaskHistoryFormModal from './TaskHistoryFormModal'
export default {
  name: 'TaskHistory',
  components: {
    AList,
    AListItem: AList.Item,
    AListItemMeta: AList.Item.Meta,
    AAvatar,
    TaskHistoryFormModal
  },
  props: {
    processInstanceId: String,
    formData: {
      type: Object,
      default: () => {}
    },
    task: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dataSource: [],
      url: {
        historics: '/camunda/task/historics/'
      }
    }
  },
  watch: {
    processInstanceId: {
      handler() {
        this.getHistorics()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    fomart(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    async getHistorics() {
      try {
        this.confirmLoading = true
        const res = await getAction(this.url.historics + this.processInstanceId)
        this.confirmLoading = false
        if (res.success) {
          this.dataSource = res.result.filter(item => {
            return item.activityType === 'userTask'
          })
        } else {
          this.dataSource = []
        }
      } catch (error) {
        this.confirmLoading = false
      }
    },
    handleDetail(task) {
      this.$refs.TaskHistoryFormModal.show(task)
    },
    getFirstName(data) {
      const nickname = data.textMap?.assignee$DICT_TEXT_
      return nickname.charAt(0)
    }
  }
}
</script>

<style>
.list-warp{
  max-height: 600px;
  overflow-y: auto;
}
</style>
